<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="https://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script
            src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script
            src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>


</head>

<body>
<div class="container">
    <img src="../../../images/before/4.jpg" width="1520px" height="100px"/>
</div>
<div>
    <p
            style="font-size: 25px; font-family: fantasy; color: rgb(116, 139, 240); text-align: center;">个人中心</p>
    <div style="text-align: center;"><a href="/user/main">返回主页</a></div>
</div>
<ul class="tabs vertical" data-tab>
    <li class="tab-title active"><a href="#menu1" class="item"> <i class="fi-info"></i>个人信息</a></li>
    <li class="tab-title"><a href="#menu2" class="item"><i class="fi-list"></i>订单</a></li>
    <li class="tab-title"><a href="#menu3" class="item"><i class="fi-mail"></i>留言 </a></li>
</ul>

<div class="tabs-content">
    <div class="content active" id="menu1" aria-hidden="true"
         tabindex="-1">
        <!--         个人信息 -->
        <div class="small-6 small-centered columns">
            <!--Foundation 修改列居中-->
            <form:form action="/user/updateUser" method="post" modelAttribute="user">
                <input id="userId" name="userId" type="hidden" value="${user.userId}">
                姓名:
                <form:input path="userRealname"/>

                电话:
                <input type="text" name="userTel" id="userTel"
                       value="${user.userTel} " readonly="readonly">
                身份证号:
                <form:input path="userIdnum"/>
                <p id="Idnum" style="color: red;"></p>
                昵称:
                <form:input path="userName"/>
                密码:
                <form:input path="userPwd"
                            type="password"/>
                <p id="pwd" style="color: red;"></p>
                <div style="text-align: center;">
                    <input type="button" value="提交" onclick="myFunction()"/> <input
                        type="reset" value="重置"/>
                </div>

            </form:form>
        </div>
    </div>
    <div class="content" id="menu2" aria-hidden="true" tabindex="-1">
        <!--           个人订单 -->
        <div class="small-12 small-centered columns">
            <table border="1" bordercolor="PaleGreen">
                <tr>
                    <th width="150px">订单编号</th>
                    <th width="100px">房间号</th>
                    <th width="100px">姓名</th>
                    <th width="150px">电话</th>
                    <th width="150px">身份证号</th>
                    <th width="100px">入住日期</th>
                    <th width="100px">离店日期</th>
                    <th width="100px">预定日期</th>
                    <th width="100px">订单金额</th>
                    <th width="100px">支付状态</th>
                </tr>
                <c:forEach var="n" items="${reserve}">
                    <tr onmousemove="changeColor(this)"
                        onmouseout="changeColor1(this)">
                        <td>${n.reserveId}</td>
                        <td>${n.reserveRoomId}</td>
                        <td>${n.reserveInName}</td>
                        <td>${n.reserveInTel}</td>
                        <td>${n.reserveInIdnum}</td>
                        <td>${n.reserveInTime}</td>
                        <td>${n.reserveOutTime}</td>
                        <td>${n.reserveNowTime}</td>
                        <td>${n.reservePrice}</td>

                        <td><c:if test="${n.reserveState == 0}">未付款</c:if>
                            <c:if test="${n.reserveState == 1}">已付款</c:if></td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <div class="content" id="menu3" aria-hidden="true" tabindex="-1">
        <!--         个人留言 -->
        <div class="small-12 small-centered columns">
            <table border="1" bordercolor="PaleGreen">
                <tr>
                    <th width="150px">标题</th>
                    <th width="200px">内容</th>
                    <th width="100px">时间</th>
                    <th width="200px">回复内容</th>
                    <th width="150px">回复时间</th>
                    <th width="100px">回复人</th>
                </tr>
                <c:forEach var="n2" items="${message }">
                    <tr onmousemove="changeColor(this)"
                        onmouseout="changeColor1(this)">
                        <td>${n2.messageTitle}</td>
                        <td>${n2.messageContent}</td>
                        <td>${n2.messageTime}</td>
                        <td><c:if test="${n2.messageReply == null}">暂无回复</c:if>
                            <c:if test="${n2.messageReply != null}">${n2.messageReply}</c:if></td>
                        <td><c:if test="${n2.messageReplyTime == null}">无</c:if>
                            <c:if test="${n2.messageReplyTime != null}">${n2.messageReplyTime}</c:if></td>
                        <td><c:if test="${n2.messageReplyId == null}">无</c:if>
                            <c:if test="${n2.messageReplyId != null}">${n2.messageReplyId}</c:if></td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
</div>
<!--初始化 Foundation JS -->
<script>
    function myFunction() {
        var errortxtid = ""
        var errortxtpwd = ""
        var flag = true
        var userIdnum = document.getElementById("userIdnum").value
        var userPwd = document.getElementById("userPwd").value
        var judge = validateIdCardNum(userIdnum)
        if (judge == false) {
            errortxtid = "身份证输入错误请重新输入！";
            flag = false
            document.getElementById("Idnum").innerHTML = errortxtid;
        } else {
            document.getElementById("Idnum").innerHTML = "";
        }
        if (userPwd.length < 6 || userPwd.length > 12) {
            errortxtpwd = "请输入6-12位密码";
            flag = false
            document.getElementById("pwd").innerHTML = errortxtpwd;
        } else {
            document.getElementById("pwd").innerHTML = "";
        }
        if (flag == true) {
            alert("成功提交");
            document.forms[0].submit();
        }

    }

    /**
     * @desc 校验身份证号是否合法
     * @param {String} idCardNum 18 位身份证号
     * @return {Boolean}
     */
    function validateIdCardNum(idCardNum) {
        // 非法字符串
        if (typeof idCardNum !== 'string')
            return false
        // 所有身份证前两位代表的是地区
        const city = {
            11: '北京',
            12: '天津',
            13: '河北',
            14: '山西',
            15: '内蒙古',
            21: '辽宁',
            22: '吉林',
            23: '黑龙江 ',
            31: '上海',
            32: '江苏',
            33: '浙江',
            34: '安徽',
            35: '福建',
            36: '江西',
            37: '山东',
            41: '河南',
            42: '湖北 ',
            43: '湖南',
            44: '广东',
            45: '广西',
            46: '海南',
            50: '重庆',
            51: '四川',
            52: '贵州',
            53: '云南',
            54: '西藏 ',
            61: '陕西',
            62: '甘肃',
            63: '青海',
            64: '宁夏',
            65: '新疆',
            71: '台湾',
            81: '香港',
            82: '澳门',
            91: '国外'
        }
        const birthday = idCardNum.substr(6, 4) + '/'
            + Number(idCardNum.substr(10, 2)) + '/'
            + Number(idCardNum.substr(12, 2))
        const d = new Date(birthday)
        const newBirthday = d.getFullYear() + '/'
            + Number(d.getMonth() + 1) + '/' + Number(d.getDate())
        const currentTime = new Date().getTime()
        const time = d.getTime()
        // 身份证系数列表
        const arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4,
            2]
        // 设定身份证通过相加运算得到值对应的身份证最后一位的列表
        const arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3',
            '2']
        let sum = 0
        // 非法身份证
        if (!/^\d{17}(\d|x)$/i.test(idCardNum))
            return false
        // 非法地区 非法地区
        if (city[idCardNum.substr(0, 2)] === undefined)
            return false
        // 非法生日
        if (time >= currentTime || birthday !== newBirthday)
            return false

        // 计算当前身份证最后一位的值
        for (let i = 0; i < 17; i++) {
            sum += idCardNum.substr(i, 1) * arrInt[i]
        }

        const residue = arrCh[sum % 11]
        // 非法身份证哦
        if (residue !== idCardNum.substr(17, 1))
            return false

        return true
    }

    $(document).ready(function () {
        $(document).foundation();
    })
</script>
</body>

</html>